<template>
  <div class="f2eea526">
    <div class="a5cd95be">
      <div class="be88ba8a">
        <div class="f8d1e4c0">
          <div
            style="
              flex: 1 1 0%;
              min-width: 0px;
              display: flex;
              place-content: center;
              z-index: 12;
              margin-top: 10px;
            "
          >
            <div class="d8ed659a" tabindex="0" style="outline: none">
              <!-- 初次问候与提供帮助 -->
              会话
            </div>
          </div>
          <div class="b480065b"></div>
        </div>
        <div class="efe408db">
          <div
            class="ds-icon d7829b2f e7d8739b"
            style="
              font-size: 24px;
              width: 24px;
              height: 24px;
              color: rgb(139, 139, 139);
            "
          >
            <svg
              width="28"
              height="28"
              viewBox="0 0 28 28"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M23.7222 4H4.27776C3.57207 4 3 4.57207 3 5.27776C3 5.98345 3.57207 6.55553 4.27776 6.55553H23.7222C24.4279 6.55553 25 5.98345 25 5.27776C25 4.57207 24.4279 4 23.7222 4Z"
                fill="currentColor"
              ></path>
              <path
                d="M14.7593 12.8887H4.27776C3.57207 12.8887 3 13.4607 3 14.1664C3 14.8721 3.57207 15.4442 4.27776 15.4442H14.7593C15.465 15.4442 16.037 14.8721 16.037 14.1664C16.037 13.4607 15.465 12.8887 14.7593 12.8887Z"
                fill="currentColor"
              ></path>
              <path
                d="M23.7222 21.7334H4.27776C3.57207 21.7334 3 22.3055 3 23.0112C3 23.7169 3.57207 24.2889 4.27776 24.2889H23.7222C24.4279 24.2889 25 23.7169 25 23.0112C25 22.3055 24.4279 21.7334 23.7222 21.7334Z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
          <div
            class="ds-icon d7829b2f ecf90b28"
            style="
              font-size: 24px;
              width: 24px;
              height: 24px;
              color: rgb(139, 139, 139);
            "
          >
            <svg
              width="28"
              height="28"
              viewBox="0 0 28 28"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9.10999 27C8.92999 27 8.76001 26.96 8.60001 26.9C8.43001 26.83 8.29 26.74 8.16 26.61C8.03 26.49 7.94 26.3499 7.87 26.1899C7.79999 26.0299 7.76001 25.8599 7.76001 25.6899L7.73001 23.04C7.34001 22.98 6.95001 22.8799 6.57001 22.7599C6.19001 22.6299 5.83001 22.48 5.48001 22.29C5.13001 22.1 4.79999 21.88 4.48999 21.63C4.17999 21.39 3.89 21.1199 3.63 20.82C3.37 20.52 3.13999 20.21 2.92999 19.87C2.72999 19.53 2.56001 19.18 2.42001 18.82C2.28001 18.45 2.17001 18.07 2.10001 17.69C2.03001 17.3 2 16.92 2 16.53V9.46995C2 9.03995 2.04 8.61995 2.12 8.19995C2.21 7.77995 2.34 7.36995 2.5 6.96995C2.67 6.57995 2.88 6.19995 3.12 5.84995C3.36 5.48995 3.64001 5.15995 3.95001 4.85995C4.26001 4.55995 4.59999 4.28995 4.95999 4.04995C5.32999 3.80995 5.70999 3.60995 6.10999 3.44995C6.51999 3.27995 6.94 3.15995 7.37 3.07995C7.79999 2.98995 8.23001 2.94995 8.67001 2.94995H13.3C13.46 2.94995 13.61 2.97995 13.76 3.03995C13.9 3.09995 14.03 3.17995 14.14 3.28995C14.25 3.39995 14.33 3.51995 14.39 3.65995C14.45 3.79995 14.48 3.94995 14.48 4.09995C14.48 4.25995 14.45 4.39995 14.39 4.54995C14.33 4.68995 14.25 4.80995 14.14 4.91995C14.03 5.02995 13.9 5.10995 13.76 5.16995C13.61 5.22995 13.46 5.25995 13.3 5.25995H8.67001C8.38001 5.25995 8.09999 5.27995 7.82999 5.33995C7.54999 5.38995 7.27999 5.46995 7.01999 5.57995C6.75999 5.67995 6.50999 5.80995 6.26999 5.96995C6.03999 6.11995 5.82 6.29995 5.62 6.48995C5.42 6.68995 5.23999 6.89995 5.07999 7.12995C4.92999 7.35995 4.78999 7.59995 4.67999 7.85995C4.57999 8.10995 4.49 8.37995 4.44 8.64995C4.38 8.91995 4.35999 9.18995 4.35999 9.46995V16.53C4.35999 16.81 4.38 17.08 4.44 17.36C4.5 17.63 4.58 17.9 4.69 18.16C4.8 18.42 4.93 18.67 5.09 18.9C5.25 19.13 5.43001 19.3499 5.64001 19.5499C5.84001 19.75 6.05999 19.92 6.29999 20.08C6.53999 20.24 6.79 20.37 7.06 20.47C7.32 20.58 7.6 20.66 7.88 20.72C8.16001 20.77 8.44001 20.7999 8.73001 20.7999C8.91001 20.7999 9.08 20.83 9.25 20.9C9.41 20.97 9.55999 21.0599 9.67999 21.18C9.80999 21.3099 9.91001 21.45 9.98001 21.61C10.05 21.77 10.08 21.94 10.09 22.11L10.1 23.74L13.08 21.61C13.84 21.07 14.69 20.7999 15.63 20.7999H19.32C19.61 20.7999 19.89 20.77 20.16 20.72C20.44 20.67 20.71 20.59 20.97 20.4799C21.23 20.3699 21.48 20.24 21.72 20.09C21.95 19.94 22.17 19.76 22.37 19.57C22.57 19.3699 22.75 19.16 22.91 18.93C23.07 18.7 23.2 18.46 23.31 18.2C23.41 17.95 23.5 17.68 23.55 17.41C23.61 17.14 23.63 16.87 23.63 16.59V12.94C23.63 12.79 23.66 12.64 23.72 12.5C23.78 12.36 23.87 12.23 23.98 12.13C24.09 12.02 24.22 11.93 24.36 11.88C24.51 11.82 24.66 11.79 24.82 11.79C24.97 11.79 25.12 11.82 25.27 11.88C25.41 11.93 25.54 12.02 25.65 12.13C25.76 12.23 25.85 12.36 25.91 12.5C25.97 12.64 26 12.79 26 12.94V16.59C26 17.02 25.95 17.44 25.87 17.86C25.78 18.28 25.66 18.69 25.49 19.08C25.32 19.48 25.11 19.8499 24.87 20.2099C24.63 20.57 24.35 20.9 24.04 21.2C23.73 21.5 23.39 21.7699 23.03 22.0099C22.67 22.2499 22.28 22.45 21.88 22.61C21.47 22.77 21.06 22.9 20.63 22.9799C20.2 23.07 19.76 23.11 19.32 23.11H16.4C15.47 23.11 14.62 23.3799 13.86 23.9199L9.91 26.74C9.67 26.91 9.39999 27 9.10999 27Z"
                fill="currentColor"
              ></path>
              <path
                d="M24.6805 5.14453H18.1874C17.5505 5.14453 17.0342 5.66086 17.0342 6.29778C17.0342 6.9347 17.5505 7.45102 18.1874 7.45102H24.6805C25.3175 7.45102 25.8338 6.9347 25.8338 6.29778C25.8338 5.66086 25.3175 5.14453 24.6805 5.14453Z"
                fill="currentColor"
              ></path>
              <path
                d="M22.6137 3.1804C22.6137 2.52848 22.0852 2 21.4333 2C20.7814 2 20.2529 2.52848 20.2529 3.1804V9.4168C20.2529 10.0687 20.7814 10.5972 21.4333 10.5972C22.0852 10.5972 22.6137 10.0687 22.6137 9.4168V3.1804Z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="b83ee326">
        <div class="f6004764" ref="scrollContainer">
          <div class="f72b0bab">
            <div class="dad65929">
              <template v-for="(item, index) in chatList" :key="index">
                <SelfChat
                  v-if="item.type === 'self'"
                  :data="item"
                  :state="chating"
                ></SelfChat>
                <OtherChat v-else :data="item" :state="chating"></OtherChat>
              </template>
            </div>
            <div class="e886deb9">
              <div class="e214291b" @click="openNew">
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M5.856 17.121a.979.979 0 0 1-.327-.06.839.839 0 0 1-.283-.177.739.739 0 0 1-.187-.255.724.724 0 0 1-.07-.303l-.02-1.609a4.663 4.663 0 0 1-1.446-.455 4.252 4.252 0 0 1-.637-.401c-.199-.146-.385-.31-.553-.492a4.442 4.442 0 0 1-.45-.577 4.303 4.303 0 0 1-.327-.637 3.823 3.823 0 0 1-.206-.686 3.729 3.729 0 0 1-.064-.704V6.478c0-.261.025-.516.077-.771a4.43 4.43 0 0 1 .244-.747 4.062 4.062 0 0 1 .932-1.28c.2-.183.418-.347.65-.493.23-.145.482-.267.739-.364a4.21 4.21 0 0 1 .81-.225c.27-.054.553-.078.835-.078H8.55c.103 0 .2.018.29.054a.7.7 0 0 1 .411.376.667.667 0 0 1-.161.766.736.736 0 0 1-.25.151.764.764 0 0 1-.29.055H5.573c-.186 0-.366.012-.54.049-.18.03-.353.079-.52.145-.167.061-.328.14-.482.237-.148.091-.29.2-.418.316a2.897 2.897 0 0 0-.347.388c-.097.14-.187.286-.257.444a2.473 2.473 0 0 0-.206.977v4.287c0 .17.013.333.051.503a2.549 2.549 0 0 0 .772 1.33 2.721 2.721 0 0 0 .913.559c.167.066.347.115.527.152.18.03.36.048.546.048a.904.904 0 0 1 .61.23.848.848 0 0 1 .194.262.84.84 0 0 1 .07.303l.007.99 1.915-1.293a2.877 2.877 0 0 1 1.64-.492h2.372c.186 0 .366-.018.54-.048.18-.03.353-.08.52-.146.168-.067.329-.146.483-.237.148-.091.29-.2.418-.316.128-.121.244-.249.347-.388a2.8 2.8 0 0 0 .257-.444 2.47 2.47 0 0 0 .206-.977V8.585a.646.646 0 0 1 .225-.492.679.679 0 0 1 .244-.152.814.814 0 0 1 .585 0c.09.03.174.085.244.152a.657.657 0 0 1 .225.492V10.8c0 .261-.032.516-.083.771a4.192 4.192 0 0 1-.245.74c-.109.244-.244.468-.398.687a3.735 3.735 0 0 1-.534.6c-.2.183-.418.347-.65.493a4.134 4.134 0 0 1-.738.364 4.7 4.7 0 0 1-.81.225c-.27.054-.553.079-.836.079h-1.877c-.604 0-1.144.164-1.633.491l-2.54 1.713a.913.913 0 0 1-.514.157z"
                    fill="currentColor"
                  ></path>
                  <path
                    d="M15.866 4.125h-4.174c-.41 0-.741.313-.741.7 0 .387.332.7.741.7h4.174c.41 0 .742-.313.742-.7 0-.387-.332-.7-.742-.7z"
                    fill="currentColor"
                  ></path>
                  <path
                    d="M14.537 2.932c0-.396-.34-.717-.759-.717s-.758.32-.758.717v3.786c0 .396.34.717.758.717.42 0 .76-.321.76-.717V2.932z"
                    fill="currentColor"
                  ></path></svg
                ><span>开启新对话</span>
              </div>
            </div>
            <div class="cbcaa82c">
              <ChatInput
                :text="chatText"
                @chat="handleChat"
                @change="handleChange"
                :state="chating"
              ></ChatInput>
              <div class="fcaa63f8">内容由 AI 生成，请仔细甄别</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { watch, ref, nextTick, onUnmounted, onMounted } from "vue";
import axios from "axios";
import ChatInput from "../ChatInput/index.vue";
import SelfChat from "./SelfChat/index.vue";
import OtherChat from "./OtherChat/index.vue";
const modelList = window.modelList;

const props = defineProps(["text"]);
const chatText = ref("");
const chatList = ref([]);
const chating = ref(false);
const scrollContainer = ref(null);
const disableScroll = ref(false);
sessionStorage.getItem("modelId");
const currentModel = ref(
  sessionStorage.getItem("modelId") || "4bd107bff85941239e27b1509eccfe98"
);
const currentModelData = ref(updateModel());

function updateModel() {
  return modelList.find((item) => item.id === currentModel.value);
}
let addthink = false,
  addanswer = false;
function addThinkString(data) {
  if (!addanswer && currentModelData.value.deepSeek) {
    if (data.startsWith("<think>\n")) {
      addthink = true;
      addanswer = false;
      data = data.replace("<think>\n", "");
    }
    if (data.endsWith("</think>")) {
      addthink = false;
      data = data.replace("</think>", "");
      addanswer = true;
    }
    if (addthink) {
      chatList.value[chatList.value.length - 1].think =
        chatList.value[chatList.value.length - 1].think + data;
      addanswer = false;
    }
  } else {
    addanswer = true;
    addAnswerString(data);
  }
  updateScroll();
}
//更新滚动条位置
function updateScroll() {
  if (scrollContainer.value && !disableScroll.value) {
    nextTick(() => {
      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
    });
  }
}
onMounted(() => {
  nextTick(() => {
    scrollContainer.value.addEventListener("mousewheel", disableScrollFn);
  });
});
onUnmounted(() => {
  scrollContainer.value?.removeEventListener("mousewheel", disableScrollFn);
});
function disableScrollFn() {
  disableScroll.value = true;
}
// window.whe
function addAnswerString(data) {
  if (addanswer) {
    chatList.value[chatList.value.length - 1].message =
      chatList.value[chatList.value.length - 1].message + data;
  }
}
const formatContent = (content) => {
  if (content.indexOf("\n\n") != -1) {
    content = content.replace("\n\n", "\n");
  }
  return content;
};
let controller;
const handleChat = (text) => {
  if (typeof text === "boolean" && !text && controller) {
    controller.abort();
    chating.value = false;
    addthink = false;
    addanswer = false;
    chatList.value[chatList.value.length - 1].state = "complete";
    return;
  }
  if (chating.value) return;
  chating.value = true;
  chatList.value.push({
    type: "self",
    message: text,
    deepSeek: currentModelData.value.deepSeek,
  });
  chatText.value = "";
  chatList.value.push({
    type: "other",
    message: "",
    think: "",
    deepSeek: currentModelData.value.deepSeek,
  });
  let buffer = "";
  let receivedLength = 0;
  controller = new AbortController();
  if (!appKey) {
    appKey = "cba0766e1fdf48bcb418d7440a790b43";
  }
  let messages = [];
  messages = chatList.value.map((item) => {
    if (item.type === "other" && !item.message && !item.think) {
      return;
    }
    return {
      role: item.type === "self" ? "user" : "assistant",
      content: item.think && !item.message ? " " : item.message,
    };
  });
  messages = messages.filter((item) => item);
  axios({
    method: "post",
    url: "/chat/completions",
    // 5095964b7fad46a6a8cd0762cabdf80b  cba0766e1fdf48bcb418d7440a790b43
    headers: {
      Authorization: "Bearer " + appKey,
      "Content-Type": "application/json",
      Accept: "*/*",
    },
    signal: controller.signal,
    data: {
      model: currentModel.value,
      stream: true,
      messages,
    },
    onDownloadProgress: (progressEvent) => {
      const chunk =
        progressEvent.event.target.responseText.slice(receivedLength);
      receivedLength = progressEvent.event.target.responseText.length;

      buffer += chunk;

      // 处理可能的多行数据
      let lineEndIndex;
      while ((lineEndIndex = buffer.indexOf("\n")) >= 0) {
        const line = buffer.slice(0, lineEndIndex).trim();
        buffer = buffer.slice(lineEndIndex + 1);
        // if (!line) continue;
        if (line.startsWith("data:")) {
          const dataStr = '{"data":' + line.substring(5) + "}";
          if (line.substring(5) === "[DONE]") {
            addthink = false;
            addanswer = false;
            return;
          }
          try {
            const dataJson = JSON.parse(dataStr);
            let content = dataJson.data.choices[0].delta.content;
            // console.log(content);
            if (content) {
              content = formatContent(content);
              addThinkString(content || "");
            }
          } catch (e) {
            console.error("失败", e);
          }
        }
      }
    },
  }).then((res) => {
    addthink = false;
    addanswer = false;
    chating.value = false;
  });
};
const handleChange = (data) => {
  if (data.type == "modelId") {
    currentModel.value = data.data.id;
    currentModelData.value = data.data;
  }
};
const openNew = () => {
  window.open(window.location.href);
};
if (props.text) {
  handleChat(props.text);
}
</script>
<style lang="scss" scoped></style>
